<article class="l-chart-item" [ngClass]="wrapperClassName" [hidden]="shouldHide">
    <pp-scatter-chart-setting-popup [hidden]="hideSettingPopup"
                                    [instanceKey]="instanceKey"
                                    [min]="fromY"
                                    [max]="toY"
                                    (outApply)="onApplySetting($event)"
                                    (outCancel)="onCancelSetting()">
    </pp-scatter-chart-setting-popup>
    <pp-scatter-chart-options
            [instanceKey]="instanceKey"
            [hiddenOptions]="{ setting: false, download: false, open: false, help: false }"
            (outShowSetting)="onShowSetting()"
            (outDownload)="onDownload()"
            (outOpenScatterPage)="onOpenScatterPage()"
            (outShowHelp)="onShowHelp($event)">
    </pp-scatter-chart-options>
    <ng-container *ngIf="useScatterChartV2; then scatterV2; else scatterV1"></ng-container>
    <ng-template #scatterV2>
        <pp-scatter-chart-v2 style="height: 215px"
                             [instanceKey]="instanceKey"
                             [addWindow]="addWindow"
                             [mode]="scatterChartMode"
                             [width]="width"
                             [height]="height"
                             [fromX]="fromX"
                             [toX]="toX"
                             [fromY]="fromY"
                             [toY]="toY"
                             [application]="selectedApplication"
                             [agent]="selectedAgent"
                             [timezone]="timezone"
                             [dateFormat]="dateFormat"
                             [i18nText]="i18nText"
                             [enableServerSideScan]="enableServerSideScan"
                             (outSelectArea)="onSelectArea($event)"
                             (outChangeRangeX)="onChangeRangeX($event)">
        </pp-scatter-chart-v2>
    </ng-template>
    <ng-template #scatterV1>
        <pp-scatter-chart style="height: 215px"
                          [instanceKey]="instanceKey"
                          [addWindow]="addWindow"
                          [mode]="scatterChartMode"
                          [width]="width"
                          [height]="height"
                          [fromX]="fromX"
                          [toX]="toX"
                          [fromY]="fromY"
                          [toY]="toY"
                          [application]="selectedApplication"
                          [agent]="selectedAgent"
                          [timezone]="timezone"
                          [dateFormat]="dateFormat"
                          [i18nText]="i18nText"
                          [enableServerSideScan]="enableServerSideScan"
                          [sampleScatter]="sampleScatter"
                          (outTransactionCount)="onChangeTransactionCount($event)"
                          (outSelectArea)="onSelectArea($event)"
                          (outChangeRangeX)="onChangeRangeX($event)">
        </pp-scatter-chart>
        <pp-scatter-chart-state-view
                [instanceKey]="instanceKey"
                [transactionTypeCount]="typeCount"
                (outChanged)="onChangedSelectType($event)">
        </pp-scatter-chart-state-view>
    </ng-template>
    <div class="l-popup-block-message" *ngIf="showBlockMessagePopup">
        <div class="l-button" (click)="onCloseBlockMessage()"><i class="fas fa-times-circle"></i></div>
        <div class="l-message" [innerHTML]="i18nText.POPUP_BLOCK_MESSAGE"></div>
    </div>
</article>
